<template>
  <!-- <div>
    <span>1</span>
  </div> -->

  <table>
    <tbody>
      <tr>
        <th>name</th>
        <th>age</th>
        <th>address</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.address }}</td>
        <td>
          <Btn type="success">编辑</Btn>
          <Btn type="error">删除</Btn>
        </td>
      </tr>
    </tbody>
  </table>
</template>
 
<script setup lang='ts'>
import { reactive, ref, h } from 'vue'
// 1.template 模板书写风格  2.tsx编写风格 3.函数式组件  h函数
/* 
  h函数
  h(tag, props, children)  
  其源码是  createVnode
  其优势是  跳过了模板的编译，直接生成虚拟dom
    模板编译过程  parser -> ast -> transform -> js api -> generate -> render
  缺点是  学习成本略高  Vue3使用h函数较少

*/

// 简单模拟render
/* let render = () => {
  return h('div', {}, [
    h('div', {}, '1')
  ])
} */

let list = ref([
  { id: 1, name: 'jack', age: 18, address: 'beijing' },
  { id: 2, name: 'tom', age: 20, address: 'beijing' },
  { id: 3, name: 'rose', age: 16, address: 'beijing' },
  { id: 4, name: 'jack', age: 18, address: 'beijing' },
  { id: 5, name: 'tom', age: 20, address: 'beijing' },
  { id: 6, name: 'rose', age: 16, address: 'beijing' }
])

interface Props {
  type: string,
}

const Btn = (props: Props, ctx: any) => {
  console.log(ctx)
  return h('button', {
    id: "",
    className: "",
    style: {
      color: props.type === 'success' ? 'green' : 'red'
    },
    onClick: () => {
      console.log('click')
      // ctx.emit('click', 123132123)
      if(props.type === 'success') {
        console.log(ctx.slots.default())
      } else {
        console.log('删除')
      }
    }
  }, ctx.slots.default())
}


</script>
 
<style scoped lang='less'>
</style>
